<script setup>
  import {ref} from "vue";
  //加载数据
  import {contestApi} from "@/api/contest.js";
  import {projectApi} from "@/api/project.js";
  const contestList = ref()
  const loadData = () => {
    contestApi.list().then(result =>{
      contestList.value = result.data;
    })
  }
  loadData()

  //卡片点击事件
  const clickCard = (id) => {
    projectApi.selectByContestId(id).then(result => {
      console.log(result.data);
    });
  };
</script>

<template>
  <div class="flex">
    <div v-for="contest in contestList" :key="contest.id" class="contest-card">
      <el-card shadow="hover" v-model="contest.id" @click="clickCard(contest.id)">
        <div class="card-content">{{ contest.name }}</div>
      </el-card>
    </div>
  </div>
</template>


<style scoped>
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.contest-card {
  flex: 0 0 calc(33.33% - 16px); /* 每个卡片占据三分之一的宽度，减去间距 */
  margin-bottom: 16px; /* 卡片之间的间距 */
  height: calc(100vh / 3); /* 确保每行卡片高度为屏幕的三分之一 */
}

.el-card {
  background-color: #f5f5f5; /* 卡片背景色 */
  border: 1px solid #ddd; /* 卡片边框 */
  border-radius: 8px; /* 圆角 */
  transition: box-shadow 0.3s; /* 动效 */
  height: 100%; /* 确保卡片填满容器高度 */
}

.el-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 鼠标悬停时的阴影效果 */
}

.card-content {
  padding-top: 90px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 100%; /* 让内容填满卡片 */
  font-size: 1.5em; /* 字体大小 */
  color: #333; /* 字体颜色 */
}
</style>